<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
  <head>
    <title>${appTitle}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="${contextPath}/css/bootstrap.min.css" rel="stylesheet" media="screen"/>
	<link href="${contextPath}/css/core.css" rel="stylesheet"/>
	<link rel="shortcut icon" type="image/png" href="${contextPath}/img/favicon.ico" />
  </head>
<body>
	<div class="container body-container">
	<%@ include file="../header.jsp"%>
		<div class="row">
			<div class="span3">
			<%@ include file="../side.jsp"%>
			</div>
			<div class="span9">
				<h4>文章管理</h4>
				<div class="data-table-grid">
					<table class="table table-condensed table-bordered table-striped table-hover">
		              <thead>
		                <tr>
		                  <th colspan="5">
								  <div class="btn-group">
								  	<a href="${contextPath}/admin/articles/create" class="btn btn-link btn-small">新增</a>
								  	<!-- 
								  	<a class="btn btn-link btn-small">修改</a>
								  	<a class="btn btn-link btn-small">删除</a>
								  	 -->
								  </div>
		                  </th>
		                </tr>
		                <tr>
		                  <th>#</th>
		                  <th>标题</th>
		                  <th>访问</th>
		                  <th>时间</th>
		                  <th style="width: 68px;">操作</th>
		                </tr>
		              </thead>
	              <tbody>
	              	<c:forEach var="row" items="${page.rows }">
	                <tr>
	                  <td></td>
	                  <td>${row.title }</td>
	                  <td>${row.viewCount }</td>
	                  <td>${row.createTime }</td>
	                  <td>
	                  	<c:choose>
	                  	<c:when test="${row.topable }">
	                  	<a title="取消置顶" data-id="${row.id }" class="icon-chevron-down" href="javascript:void(0)" rel="tooltip"></a>
	                  	</c:when>
	                  	<c:otherwise>
					  	<a title="置顶" data-id="${row.id }" class="topable icon-chevron-up" href="javascript:void(0)" rel="tooltip"></a>
	                  	</c:otherwise>
	                  	</c:choose>
					  	<a title="查看评论" class="icon-comment" href="${contextPath}/articles/${row.id }#comments" target="_blank" rel="tooltip"></a>
					  	<a title="编辑" class="icon-edit" href="${contextPath}/admin/articles/${row.id }/edit" rel="tooltip"></a>
					  	<a title="删除" data-id="${row.id }" class="delete icon-remove" href="javascript:void(0)" rel="tooltip"></a>
					  </td>
	                </tr>
	                </c:forEach>
	              </tbody>
	              <tfoot>
	                <tr>
	                  <td colspan="5">
			            	<div class="pagination pagination-small pagination-right">
			            		<ul>
			            			<li><a href="${contextPath}/admin/articles/p/1">首页</a></li>
			            			<c:choose>
			            			<c:when test="${1 == page.pageIndex}">
			            				<li class="disabled"><a>«</a></li>
			            			</c:when>
			            			<c:otherwise>
			            				<li><a href="${contextPath}/admin/articles/p/${page.pageIndex - 1}">«</a></li>
			            			</c:otherwise>
			            			</c:choose>
			            			<c:forEach begin="${page.pageBegin }" end="${page.pageEnd }" var="i">
			            			<c:choose>
			            			<c:when test="${i == page.pageIndex }">
			            				<!-- TODO 
			            				<li class="active"><a><input type="text" value="${i}"></a></li>
			            				 -->
			            				<li class="active"><a>${i}</a></li>
			            			</c:when>
			            			<c:otherwise>
				            			<li><a href="${contextPath}/admin/articles/p/${i}">${i}</a></li>
			            			</c:otherwise>
			            			</c:choose>
			            			</c:forEach>
			            			<c:choose>
			            			<c:when test="${page.pageCount == page.pageIndex }">
			            				<li class="disabled"><a>»</a></li>
			            			</c:when>
			            			<c:otherwise>
			            				<li><a href="${contextPath}/admin/articles/p/${page.pageIndex + 1}">»</a></li>
			            			</c:otherwise>
			            			</c:choose>
			            			<li><a href="${contextPath}/admin/articles/p/${page.pageCount}">末页[${page.pageCount}]</a></li>
			            		</ul>
			            	</div>
            			</td>
	                </tr>
	              </tfoot>
	            </table>
				</div>
			</div>
		</div>
	<%@ include file="../footer.jsp"%>
	</div>
<script src="${contextPath}/js/jquery-1.8.2.js"></script>
<script src="${contextPath}/js/bootstrap.js"></script>
<script type="text/javascript">
$("#nav-article-list").addClass("active");
$(".delete").click(function() {
	var rowId = $(this).attr("data-id");
	if (confirm("真的不想要了吗？")) {
		$.ajax({
			url:"${contextPath}/admin/articles/"+rowId+".json"
			,type:"DELETE"
			,dataType:"json"
			,error:function(xhr, status, error){}
			,success:function(data) {
				if (data.result) {
					alert("删除成功");
					window.location.reload();
				} else {
					alert(data.message);
				}
			}
		});
	}
});
$(".icon-chevron-up").click(function() {
	var rowId = $(this).attr("data-id");
	if (confirm("置顶?")) {
		topable(true, rowId);
	}
});
$(".icon-chevron-down").click(function() {
	var rowId = $(this).attr("data-id");
	if (confirm("取消置顶吗?")) {
		topable(false, rowId);
	}
});
function topable(topable, rowId) {
	$.ajax({
		url:"${contextPath}/admin/articles/tops.json"
		,type:"POST"
		,dataType:"json"
		,data:{"topable":topable,"id":rowId}
		,error:function(xhr, status, error){}
		,success:function(data) {
			if (data.result) {
				alert("操作成功");
				window.location.reload();
			} else {
				alert(data.message);
			}
		}
	});
}
</script>
</body>
</html>